<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function btnCheckOnClick() {
            var text_username = document.getElementById("text_username");
            var usernameStr = text_username.value;
            console.log(usernameStr);
            /*正则表达式*/
            var pattern = /^\w{5,12}$/
            var username_span = document.getElementById("username_span");
            if (pattern.test(usernameStr)) {
                username_span.innerHTML = "<img src=\"./img/right.png\" alt=\"404\" width=\"10\" id=\"imgCheck\">";
            } else {
                // console.log("用户名不合法");
                username_span.innerHTML = "<img src=\"./img/wrong.png\" alt=\"404\" width=\"10\" id=\"imgCheck\">";
            }
        }

        function text_usernameOnchange() {
            var username_span = document.getElementById("username_span");
            username_span.innerHTML = "";
        }
    </script>
</head>
<body>
    用户：<input type="text" id="text_username" onchange="text_usernameOnchange()" onkeypress="this.onchange()" onpaste="this.onchange()" oninput="this.onchange()">
    <span id="username_span"></span>
    <button id="btnCheck" onclick="btnCheckOnClick()">校验</button>
</body>
</html>